<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        #box {
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            position: absolute;
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>

</head>
<body>
<div id="box"></div>
<script>
    // $('#box').animate({
    //     width: 600,
    //     opacity: 0.8,
    //     top:'100px'
    // },5000,'swing',function () {
    //     alert('动画完成')
    // })

    $(function () {
        function aaaa() {
            $('#box').animate({width:600},function () {
                $('#box').animate({width:100,left:500},function () {
                    $('#box').animate({height:400},function () {
                        $('#box').animate({height:100,top:300},function () {
                            $('#box').animate({width:600,left:0},function () {
                                $('#box').animate({width:100},function () {
                                    $('#box').animate({height:400,top:0},function () {
                                        $('#box').animate({height:100},function () {
                                            aaaa();
                                        })
                                    })
                                })
                            })
                        })
                    })
                })
            });

        }
        aaaa()
    })



</script>
</body>
<html>